<template>
  <a-spin :spinning="confirmLoading" style="background: #fff">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row :gutter="48">
          <a-col :span="8">
            <a-form-model-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userId">
              <!-- <select-user-by-dep :multi="false" v-model="model.handlerId" disabled /> -->
               <!-- 这个字段后端不需要 -->
              <j-select-user-by-dep :backUser="true" v-model="model.userId" :multi="false" @back="getPeopleInfo"></j-select-user-by-dep>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="人员编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="empId_dictText">
              <!-- 为了避免冲突，这里将j-input的disabled改成属性isDisabled -->
              <j-input v-model="model.empId_dictText" disabled placeholder="请输入人员编号"></j-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="所属部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sysOrgCode">
              <!-- <j-select-depart v-model="model.handlerDeptId" disabled/> -->
              <j-select-depart
                v-model="model.sysOrgCode"
                :trigger-change="true"
                :multi="true"
                disabled
              ></j-select-depart>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="人员类型" prop="userType" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag @backItem="getUserType"  v-model="model.userType" dictCode="production_user_type" placeholder="请选择人员类型" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-textarea v-model="model.remark" :maxLength="200" placeholder="请输入备注" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>
<script>
import moment from 'moment'
import { postAction,getAction,putAction } from '@/api/manage'
export default {
  components: {},
  data() {
    return {
      confirmLoading: false,
      model: {},
      moment,
      validatorRules: {
        userId: [
          { required: true, message: '请选择姓名', trigger: 'change' },
        ],
        // empId: [
        //   { required: true, message: '请输入人员编号', trigger: 'input' },
        // ],
        // sysOrgCode: [
        //   { required: true, message: '请选择所属部门', trigger: 'input' },
        // ],
        userType: [
          { required: true, message: '请选择人员类型', trigger: 'change' },
        ],
      },
      labelCol: {},
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 },
      },
      formDisabled: false,
      url: {
        getBillNo: '/api/erp/base/generatedFormNumber',
        submitData: '/api/erp/hours/personneltype/erpProductionPersonnelType/add',
        edit:'/api/erp/hours/personneltype/erpProductionPersonnelType/edit',
        getDataById:'/api/erp/hours/personneltype/erpProductionPersonnelType/list'
      },
      mostImportantParams: {
        pageSize: -1,
      },
      initStatus: {
        canEdit: false,
      },
    }
  },
  props: {
    modalSlotStatus: {
      type: String,
      default: 'add',
      required: false,
    },
    editParams: {
      type: String,
      default: () => {}
    }
  },
  watch: {
    modalSlotStatus: {
      async handler(val) {
        // 每次进入页面的时候都先重置状态，再根据status去设置状态
        this.resetInitStatus()
        switch (val) {
          // 如果是新增页面，才有必要初始化数据
          case 'add':
            // 设置表格可输入状态
            this.initStatus.canEdit = true
            break
          case 'edit':
            this.initStatus.canEdit = true
            await this.getDataByid()
            break
          case 'view':
            break
          default:
            break
        }
      },
      immediate: true,
    },
  },
  methods: {
    // ...mapGetters(['userInfo']),
    // 设置新增的时候一些数据的初始化
    // 提交数据，需要先校验是否能提交
    submitData() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.confirmLoading = true
            // 调用接口提交数据
            if(this.modalSlotStatus === 'add'){
              postAction(this.url.submitData, this.model)
              .then((res) => {
                if (res.success) {
                  this.$message.success('提交成功')
                  this.$emit('submitSuccess')
                } else {
                  this.$message.error(res.message)
                }
              })
              .finally(() => {
                this.confirmLoading = false
              })
            }
            else if(this.modalSlotStatus === 'edit'){
              putAction(this.url.edit, this.model)
              .then((res) => {
                if (res.success) {
                  this.$message.success('编辑成功')
                  this.$emit('submitSuccess')
                } else {
                  this.$message.error(res.message)
                }
              })
              .finally(() => {
                this.confirmLoading = false
              })
            }

          }
        })
    },
    // 重置initStatus数据状态为data里面的初始状态，即都为false
    resetInitStatus() {
      this.initStatus = this.$options.data().initStatus
    },
    // 通过选择人员姓名后将数据储存，再返回
    getPeopleInfo(info){
      const _info = info[0]
      // this.model = _info
      this.$set(this.model,'empId',_info.empId)
      this.$set(this.model,'empId_dictText',_info.workNo)
      this.$set(this.model,'userId',_info.username)
      this.$set(this.model,'sysOrgCode',_info.departId)
      this.$set(this.model,'teamId',_info.departId)
      this.$set(this.model,'nickName',_info.realname)
      // 手动校验
      this.$refs.form.validateField('empId')
      this.$refs.form.validateField('sysOrgCode')
    },
    // 通过id查询人员
    async getDataByid(){
      const params = {id:this.editParams}
      return getAction(this.url.getDataById,params).then(res=>{
        if(res.success){
          this.model = res.result.records[0]
        }
      })
    },
    // 用来做手动校验
    getUserType(){
      this.$refs.form.validateField('userType')
    }
  },
}
</script>
<style scoped lang="less"></style>
